<template>
  <div class="icons-wrapper">
    <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>
      <div>
        <div class="icon" v-for="item of list01" :key="item.id">
          <a :href="item.iconHref" :title="item.title">
      	    <div>
      	      <img :src="item.imgUrl" :alt="item.imgAlt" />
      	    </div>
      	    <div class="keywords">{{item.content}}</div>
      	  </a>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div>
        <div class="icon" v-for="item of list02" :key="item.id">
          <a :href="item.iconHref" :title="item.title">
      	    <div>
      			<img :src="item.imgUrl" :alt="item.imgAlt" />
      	    </div>
      	    <div class="keywords">{{item.content}}</div>
      	  </a>
        </div>
      </div>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
   </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
  	list01: Array,
  	list02: Array
  },
  data: function(){
  	return {
  	  swiperOption: {
  	    pagination: '.swiper-pagination'
  	  }
  	}
  }
}
</script>

<style lang="stylus" scoped>
	.icons-wrapper >>> .swiper-wrapper
		height: 1.80rem !important
	.icons-wrapper >>> .swiper-pagination-bullets
		bottom: 0.08rem !important
	.icons-wrapper >>> .swiper-pagination-bullet
		width: 0.06rem !important
		height: 0.06rem !important
		margin: 0 0.04rem !important
	.icons-wrapper >>> .swiper-pagination-bullet-active
		background: #33bfcb !important
	.icons-wrapper
		/*overflow: hidden
		height: 0
		padding-bottom: 48%*/
		padding-top: 0.12rem
		background-color: white
		.icon
			float: left
			width: 25%
			height: 0.72rem
			text-align: center
			padding-bottom: 0.08rem
			img
				width: 0.55rem
				height: 0.55rem
		.keywords
			margin-top: 0.06rem
			color: #17
</style>
